<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>FileReader API</title>

</head>
<body>
<input type="file" id="file" onchange="startRead()" multiple="multiple">

<p id="result"></p>
<p id="msg"></p>
<script type="text/javascript">

/**
 * 必须在 服务器
 * new FileReader();
 * abort	none	中断读取
 * readAsBinaryString	file	将文件读取为二进制码
 * readAsDataURL	file	将文件读取为 DataURL
 * readAsText	file, [encoding]	将文件读取为文本
 * onabort	中断时触发
 * onerror	出错时触发
 * onload	文件读取成功完成时触发
 * onloadend	读取完成触发，无论成功或失败
 * onloadstart	读取开始时触发
 * onprogress	读取中 二进制文件时
 */
    function startRead() {
      // obtain input element through DOM

      var file = document.getElementById('file').files[0];
      if(file){
        getAsText(file);
      }
    }
    function getAsText(readFile) {

      var reader = new FileReader();
      var emsg=document.getElementById('msg');
      var eresult = document.getElementById('result');
      // Read file into memory as UTF-16
      reader.readAsText(readFile, "UTF-8");

      // Handle progress, success, and errors
      reader.onloadstart = function(e){ 
          var s=document.createElement('span');
          s.innerHTML='读取开始<br/>'
          emsg.appendChild(s)
      };
      reader.onload = function(e){
          var s=document.createElement('span');
          s.innerHTML=e.target.result;

          emsg.appendChild(s)
          
      };
      reader.onerror = function(e){
          emsg.innerHTML='读取错误';
      };;
    }


</script>
</body>
</html>